<!--
 * @Date: 2025-09-27 19:37:40
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-09-29 00:15:46
 * @FilePath: /admin-vue/src/layouts/modules/global-breadcrumb/index.vue
-->
<script setup lang="ts">
import { createReusableTemplate } from '@vueuse/core'
import { useRoute, useRouter } from 'vue-router'

defineOptions({
  name: 'GlobalBreadcrumb',
})

const themeStore = useThemeStore()
const routeStore = useRouteStore()

interface BreadcrumbContentProps {
  breadcrumb: BreadcrumbModel
}

const [DefineBreadcrumbContent, BreadcrumbContent] =
  createReusableTemplate<BreadcrumbContentProps>()

const router = useRouter()
function handleClickMenu(routerName: string) {
  console.log(routerName)

  router.push({ name: routerName })
}
</script>

<template>
  <NBreadcrumb>
    <!-- define component start: BreadcrumbContent -->
    <DefineBreadcrumbContent v-slot="{ breadcrumb }">
      <!-- <div class="flex items-center justify-center gap-1">
        <component :is="breadcrumb.icon" class="mr-4px text-icon" />
        {{ breadcrumb.label }}
      </div> -->

      <n-icon :component="breadcrumb.icon" /> {{ breadcrumb.label }}
    </DefineBreadcrumbContent>
    <!-- define component end: BreadcrumbContent -->

    <NBreadcrumbItem v-for="item in routeStore.breadcrumbs" :key="item.key">
      <NDropdown v-if="item.options?.length" :options="item.options" @select="handleClickMenu">
        <NBreadcrumbItem>
          <BreadcrumbContent :breadcrumb="item" />
        </NBreadcrumbItem>
      </NDropdown>
      <BreadcrumbContent v-else :breadcrumb="item" />
    </NBreadcrumbItem>
  </NBreadcrumb>
</template>

<style scoped></style>
